<template>
  <!-- 头部导航 -->
  <div>
<div class="tabs">
  <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#5C5452"
   text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
      <el-menu-item index="1" style="margin-left: 270px;"><img src="../assets/首页.png" alt=""
          style="width: 20px;height: 20px;">
        京东首页</el-menu-item>
      <el-menu-item index="11" style="margin-right: 200px;"><img src="../assets/地址.png" alt=""
          style="width: 20px;height: 20px;">山东</el-menu-item>
      <el-menu-item index="111">我的订单</el-menu-item>
      <el-sub-menu index="2">
        <template #title>我的京东</template>
        <el-menu-item index="2-1">待处理订单</el-menu-item>
        <el-menu-item index="2-2">我的问答</el-menu-item>
        <el-menu-item index="2-3">我的关注</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>降价商品</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 下拉菜单 -->
      <el-sub-menu index="3">
        <template #title>企业采购</template>
        <el-menu-item index="3-1">企业购</el-menu-item>
        <el-menu-item index="3-2">公共采购</el-menu-item>
        <el-menu-item index="3-3">工业品</el-menu-item>
        <el-sub-menu index="3-4">
          <template #title>礼品卡</template>
          <el-menu-item index="3-4-1">item one</el-menu-item>
          <el-menu-item index="3-4-2">item two</el-menu-item>
          <el-menu-item index="3-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 下拉菜单 -->
      <el-sub-menu index="4">
        <template #title>客户服务</template>
        <el-menu-item index="4-1">帮助中心</el-menu-item>
        <el-menu-item index="4-2">售后服务</el-menu-item>
        <el-menu-item index="4-3">在线客服</el-menu-item>
        <el-sub-menu index="4-4">
          <template #title>item four</template>
          <el-menu-item index="4-4-1">item one</el-menu-item>
          <el-menu-item index="4-4-2">item two</el-menu-item>
          <el-menu-item index="4-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 下拉菜单 -->
      <el-sub-menu index="5">
        <template #title>网站导航</template>
        <el-sub-menu index="5-1">
          <template #title>特色主题</template>
          <el-menu-item index="5-1-1">京东金融</el-menu-item>
          <el-menu-item index="5-1-2">全球售</el-menu-item>
          <el-menu-item index="5-1-3">台湾售</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5-2">
          <template #title>行业频道</template>
          <el-menu-item index="5-2-1">item one</el-menu-item>
          <el-menu-item index="5-2-2">item two</el-menu-item>
          <el-menu-item index="5-2-3">item three</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5-3">
          <template #title>生活服务</template>
          <el-menu-item index="5-3-1">item one</el-menu-item>
          <el-menu-item index="5-3-2">item two</el-menu-item>
          <el-menu-item index="5-3-3">item three</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5-4">
          <template #title>更多精选</template>
          <el-menu-item index="5-4-1">item one</el-menu-item>
          <el-menu-item index="5-4-2">item two</el-menu-item>
          <el-menu-item index="5-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- <el-menu-item index="3" disabled>Info</el-menu-item> -->
      <el-menu-item index="6">手机京东</el-menu-item>
      <el-menu-item index="7">|</el-menu-item>
      <el-menu-item index="8">网站无障碍</el-menu-item>
    </el-menu>
    <!-- 导航栏结束 -->
  </div>
  <!-- 京东 -->
    <div class="middle">
    <div class="m-left">
      <img src="../assets/1.png" alt="">
    </div>
    <div class="m-right">
      <input type="text" v-model="search">
      <button class="s-btn">搜索</button>
    </div>
  </div>
  <div class="bottom">
    <div class="b-left">全部商品 1</div>
    <div class="b-right">
      <div class="b-f">配送至：</div>
      <el-select v-model="name">
        <el-option label="山东泰安市岱岳区北集坡街道" value="xx1">山东泰安市岱岳区北集坡街道</el-option>
        <el-option label="山东泰安市岱岳区粥店街道" value="xx2">山东泰安市岱岳区粥店街道</el-option>
        <el-option label="山东泰安市岱岳区北集坡街道" value="xx3">
          <div>
            <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
        </div>
        </el-option>
      </el-select>
    </div>
  </div>
</div>
</template>
<script setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath)=> {
  console.log(key, keyPath)
}

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const name = ref(null)
const search=ref(null)
</script>
<style lang="scss">

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 15px;
    font-weight: 600;
}
.tabs{
    width: 80%;
    margin: 0 auto;
    
}
.tabs-top{
    float:right;
    margin:10px;
}
.middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 0 auto;

  .m-left {
    img {
      width: 220px;
    }
  }

  .m-right {
    display: flex;
    align-items: center;
    input {
      border: 2px solid #c91623;
      width: 200px;
      height: 30px;
    }

    .s-btn {
      border: none;
      background-color: #c91623;
      color: #fff;
      width: 50px;
      height: 35px;
      font-weight: bold;
    }

  }
}

.bottom {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;

  .b-left {
    font-weight: bold;
    color: red;
    font-size: 20px;
    margin-left: 30px;
  }

  .b-right {
    display: flex;
    width: 300px;
    align-items: center;
    margin-top: 10px;

    .b-f {
      width: 100px;
      margin-left: -40px;
    }
  }
}
</style>